３．Hello World!
プログラミング言語をはじめるときは，学習する言語の使い方を学ぶため，「Hello World!」を表示するところから始める事が良くあります。
今回も、jsPsychを使う前にhtmlやjavascriptに慣れるために，「Hello World!」をwebブラウザ上に提示してみましょう。
https://gyazo.com/29649686288bbcf68c142eb025d5e5fc
これがHello World!をwebブラウザ上に表示するコードです。
code:Hello World!.html
<!DOCTYPE html>
<html>
<head>
<title>
Hello World!
</title>
</head>
<body>
<p> Hello World!</p>
</body>
</html>
「< >」で書かれているものをタグと呼びます。
「<」と「>」で囲まれた文字を「要素」と呼びます。
この要素の種類は、１００以上あります（上記以外の例、h1、p、aなど）。
基本的には、「<要素名></要素名>」をセットにして使用し、書きたい内容をこのセットの間に書くことで入れ子構造を作っていきます。
さらに、<title>や</title>、<p>の先頭が一段下がっています。これをインデントと呼びます。インデントによって開始タグと終了タグを見やすくすることで、入れ子構造を視覚的にわかりやすくします。インデントは，積極的に使用してください。
<!DOCTYPE html>
まず、一番上の<!DOCTYPE html>はドキュメントタイプといい、このhtmlファイルがどのバージョンを使って書かれているかを宣言するものです。<!DOCTYPE html>は、html5のバージョンを使っていることを意味します。
<html>～</html>
この要素で囲われた部分がhtml文書であることを示します。
<html>の中身は大きく head と body の2つの要素にわけることができます。
<head>~</head>
これはhtml文書におけるヘッダーを示します。ヘッダーには、これから書くhtml文書を設定する要素が入ります。文字コードの指定や、JavaScript、CSSなどです。文書のタイトル（<title>~</title>）もここに入れます。タイトルは，ブラウザのタイトルバーに表示されるタイトル文字列を入力します。
<body>~</body>
HTMLの本文を示します。この要素の間に書いた内容が、ブラウザで表示されます。
<p>~</p>
この要素はparagraph（パラグラフ）の p で、パラグラフ（＝段落）を示しています。文章を入れる事が出来ます。
それでは，実際に動かしてみましょう。
新しいフォルダ「researches」を作成してその中にHello World!.htmlを右クリックでダウンロードして保存してください。
https://gyazo.com/706c3e1a7131aad7d6a65ddec8464c37
ダウンロードしたHello World!.htmlをダブルクリックでブラウザーで表示してみてください。
https://gyazo.com/62879b9fbf8347c3e7cb838b8f6c9aa0
上の図のように上部左端に「Hello World!」と表示できました。
これで完成です。
それでは，次は実際にjsPsychを動かしてみましょう。
このページは，以下のURLを参考させていただきました。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】